<template>
<div class="app-container">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="选择模型" prop="table_name">
            <el-select v-model="ruleForm.table_name" placeholder="选择模型" @change="getFieldList">
                <el-option v-for="(item, index) in tableList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="设置字段">
            <el-row>
                <el-col :span="4">字段描述</el-col>
                <el-col :span="4">字段名</el-col>
                <el-col :span="4">是否显示</el-col>
                <el-col :span="3">显示长度</el-col>
                <el-col :span="3">对齐方式</el-col>
                <el-col :span="3">关联组件</el-col>
                <el-col :span="3">组件函数</el-col>
            </el-row>

            <el-row v-for="(item, index) in fields" :key="index">
                <el-col :span="4">
                    <el-input v-model="content[item.filed]['title']"></el-input>
                </el-col>
                <el-col :span="4">
                    <el-input v-model="content[item.filed]['name']"></el-input>
                </el-col>
                <el-col :span="4">
                    <el-input v-model="content[item.filed]['is_show']"></el-input>
                </el-col>
                <el-col :span="3">
                    <el-input v-model="content[item.filed]['width']"></el-input>
                </el-col>
                <el-col :span="3">
                    <el-input v-model="content[item.filed]['align']"></el-input>
                </el-col>
                <el-col :span="3">
                    <el-input v-model="content[item.filed]['component']"></el-input>
                </el-col>
                <el-col :span="3">
                    <el-input v-model="content[item.filed]['method']"></el-input>
                </el-col>
            </el-row>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
    </el-form>
</div>
</template>

<script>
import {
    getTableListApi,
    getFieldListApi
} from '@/api/system/system.js'

export default {
    data() {
        return {
            tableList: [],
            fields: [],
            content: [],
            ruleForm: {
                table_name: "",
                region: "",
                date1: "",
                date2: "",
                delivery: false,
                type: [],
                resource: "",
                desc: "",
            },
            rules: {
                name: [{
                        required: true,
                        message: "请输入活动名称",
                        trigger: "blur"
                    },
                    {
                        min: 3,
                        max: 5,
                        message: "长度在 3 到 5 个字符",
                        trigger: "blur"
                    },
                ],
                table_name: [{
                    required: true,
                    message: "请选择模型",
                    trigger: "change"
                }, ],
                date1: [{
                    type: "date",
                    required: true,
                    message: "请选择日期",
                    trigger: "change",
                }, ],
                date2: [{
                    type: "date",
                    required: true,
                    message: "请选择时间",
                    trigger: "change",
                }, ],
                type: [{
                    type: "array",
                    required: true,
                    message: "请至少选择一个活动性质",
                    trigger: "change",
                }, ],
                resource: [{
                    required: true,
                    message: "请选择活动资源",
                    trigger: "change"
                }, ],
                desc: [{
                    required: true,
                    message: "请填写活动形式",
                    trigger: "blur"
                }],
            },
        };
    },
    created() {
        getTableListApi({}).then(response => {
            this.tableList = response.data.tables
        })
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert("submit!");
                } else {
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        getFieldList(e) {
            getFieldListApi({
                table: e
            }).then(response => {
                this.fields = response.data.fields;
            })
        }
    },
};
</script>
